<html>
    <head>
        <style type="text/css">
            body{
                margin: 0px;
                text-align:center;
                background-color:#ebe9d7;
                font-family:Arial, Sans-Serif;
                font-size:0.75em;
            }
            .box 
            {
            	margin: 0px auto;
            	width:960px;
            	background-color:#ffffff;
            	text-align:left;
                position: relative;
            }
            .header
            {
            	height:100px;
            }
            .header h1
            {
            	margin:0px;
            	padding:30px;
            }
            .menu
            {
            	height:30px;
            	border-top:solid 1px #dccfbb;
            	border-bottom:solid 1px #dccfbb;
            	background-color:#4d3a24;
            }
            .menu div
            {
            	padding:10px 30px;
            }
            .menu a
            {
            	margin:0px 10px;
            	color:#fecd28;
            	text-decoration: none;
            }
            .content
            {
             	padding:10px 30px;
            }
            #contactFormContainer
            {
            	position:absolute;
            	left:600px;
            	float:right;
            }
            #contactForm
            {
            	height:277px;
            	width:351px;
            	background-image:url('C:/Users/furkan/PycharmProjects/cirik/templates/bkg.jpg');
            	display:none;
            }
            #contactForm fieldset
            {
            	padding:30px;
            	border:none;
            }      
            #contactForm label
            {
            	display:block;
            	color:#ffc400;
            }      
            #contactForm input[type=text]
            {
            	display:block;
            	border:solid 1px #4d3a24;
            	width:100%;
            	margin-bottom:10px;
            	height:24px;
            }  
            #contactForm textarea
            {
            	display:block;
            	border:solid 1px #4d3a24;
            	width:100%;
            	margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
            	background-color:#4d3a24;
            	border:solid 1px #23150c;
            	color:#fecd28;
            	padding:5px;
            }                
            #contactLink
            {
            	height:40px;
            	width:351px;
            	background-image:url('C:/Users/furkan/PycharmProjects/cirik/templates/slidein_button.png');
            	display:block;
            	cursor:pointer;
            }
            #messageSent
            {
            	color:#ff9933;
            	display:none;
            }
        </style>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $("#contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
                
            });
            
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }
        </script>
    </head>
    <body>
        <div class="box">
            <div id="contactFormContainer">
                <div id="contactForm">
                    <fieldset>
                        <label for="Name">Name *</label>
                        <input id="name" type="text" />
                        <label for="Email">Email address *</label>
                        <input id="Email" type="text" />
                        <label for="Message">Your message *</label>
                        <textarea id="Message" rows="3" cols="20"></textarea>
                        <input id="sendMail" type="submit" name="submit" onclick="closeForm()" />
                        <span id="messageSent">Your message has been sent successfully!</span>
                   </fieldset>
                </div>
                <span id="contactLink">Contact Link</span>
            </div>
            <div class="header">
{#                <h1>#}
{#                <img src="/images/logo.gif" style="margin-top: -40px;" /></h1>#}
            </div>
            <div class="menu">
                <div>
                <a href="#">Home</a>
                <a href="#">About us</a>
                <a href="#">Products</a>
                <a href="#">Services</a>
                <a href="#">Support</a>
                <a href="#">Advertising</a>
                </div>
            </div>
            <div class="content">
                <div id="lipsum">
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sodales, 
                        dolor ut tempor sollicitudin, nulla lacus sodales ipsum, vitae commodo dui nisi 
                        et sapien. Phasellus ac nisl. Vivamus dignissim justo iaculis mauris. 
                        Suspendisse adipiscing, arcu sit amet tincidunt pretium, lorem mauris 
                        ullamcorper erat, blandit auctor erat massa sit amet neque. Etiam vulputate, 
                        justo nec venenatis pharetra, erat erat bibendum neque, eget tempor sapien 
                        tellus nec dolor. Maecenas faucibus orci ac lacus pulvinar sodales. Suspendisse 
                        pede nunc, semper ac, elementum sed, sodales eget, magna. Sed vestibulum congue 
                        magna. Nam mattis nisi eu risus. Etiam nec purus. Donec lacinia rhoncus elit. In 
                        elit. Vestibulum magna. Vivamus non odio id ipsum mollis porta. Cras feugiat. 
                        Aenean consequat, magna quis luctus faucibus, elit nunc mattis enim, vitae 
                        sollicitudin velit turpis eget justo. Nullam luctus ligula vel tellus. Etiam vel 
                        orci in eros eleifend adipiscing. Suspendisse magna nunc, adipiscing sed, 
                        suscipit eu, feugiat pretium, velit. Aenean feugiat dignissim mauris.
                    </p>
                    <p>
                        Ut porta, ante sed volutpat blandit, tellus justo interdum odio, vitae molestie 
                        arcu nisl et turpis. Aliquam euismod purus eu massa. Aenean sagittis elementum 
                        enim. Nullam nunc orci, luctus eget, rutrum vel, blandit quis, ante. Morbi nisl 
                        odio, molestie quis, tempus et, fermentum et, diam. Morbi convallis convallis 
                        neque. Sed tempus. Nunc diam nisl, ultrices non, rutrum sed, adipiscing sit 
                        amet, nibh. Morbi dolor. Duis non tellus et nulla varius imperdiet. Aenean 
                        pretium consequat sem. Etiam id purus ut tellus molestie blandit. Aenean eu 
                        elit. Integer ut nibh. In eget ligula vitae urna fringilla congue.
                    </p>
                    <p>
                        Nam semper mi pulvinar tellus. Sed hendrerit, enim non tristique pulvinar, purus 
                        felis ultricies est, rhoncus ullamcorper turpis pede id risus. In hac habitasse 
                        platea dictumst. Sed scelerisque. Pellentesque in sapien vitae nisi volutpat 
                        iaculis. Fusce laoreet aliquet mi. Proin non orci sollicitudin turpis egestas 
                        ultricies. Duis ultricies turpis. Nullam augue. Suspendisse potenti. Cras in 
                        lectus et turpis vulputate elementum. Phasellus elit sem, semper sit amet, 
                        placerat eu, bibendum sit amet, risus. Donec erat ligula, viverra eu, fringilla 
                        eget, feugiat vel, nibh. Mauris vel justo. Quisque cursus. Etiam id ipsum. Sed 
                        lorem magna, venenatis vitae, eleifend vitae, facilisis at, lacus.
                    </p>
                    <p>
                        Nunc euismod. In id turpis tempus leo tincidunt lacinia. In ultrices. Quisque 
                        sed nibh sit amet velit sollicitudin semper. Quisque rhoncus. Sed cursus, magna 
                        non laoreet porta, metus urna laoreet lectus, aliquam tincidunt leo erat vel 
                        erat. Cras laoreet turpis quis risus pretium sagittis. Aliquam at magna interdum 
                        libero rutrum blandit. Curabitur quis erat nec tellus condimentum tincidunt. 
                        Nunc non purus sed ante rutrum consectetuer. In hac habitasse platea dictumst. 
                        Nulla non lorem. Nunc adipiscing pellentesque arcu. Fusce a mi eu dui convallis 
                        facilisis. In sed libero. Vestibulum rutrum tempor augue. Mauris consequat 
                        dignissim metus. Nulla risus. Cum sociis natoque penatibus et magnis dis 
                        parturient montes, nascetur ridiculus mus.
                    </p>
                    <p>
                        Aliquam aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, 
                        nascetur ridiculus mus. Maecenas sagittis, lorem in facilisis vulputate, elit 
                        nunc lacinia leo, ut porttitor ligula quam ac ipsum. Fusce vel sapien a lacus 
                        scelerisque gravida. Donec massa. Proin nec massa ut neque sollicitudin semper. 
                        Donec fringilla. Morbi vitae leo. Sed velit. Aliquam imperdiet. Nunc urna eros, 
                        elementum eget, ornare consequat, sagittis vel, lectus. Cras vitae magna. 
                        Praesent dictum velit in sapien. Nulla facilisi. Fusce nibh sapien, bibendum ut, 
                        sollicitudin et, adipiscing eu, nunc. Quisque metus enim, sagittis vel, viverra 
                        eget, placerat sit amet, sem. Phasellus dictum nisi quis ante. Nunc at mi quis 
                        turpis accumsan ultricies. Proin pede.
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>
